@import '../../../core/index.less';

.orin-w-imagezoom-root {
    padding: 0;
    margin: 0;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #303030;
    z-index: @dialogZIndex;
    .close-wrapper {
        position: absolute;
        right: 28/@remScale;
        top: 28/@remScale;
        width: 50/@remScale;
        height: 50/@remScale;
        z-index: 1002;
        display: flex;
        cursor: pointer;
        .close-image-zoom {
            width: 30/@remScale;
            height: 30/@remScale;
            color: @border-color;
        }
        @media (max-width: @max1) {
            right: 18/@remScale;
            top: 18/@remScale;
            .close-image-zoom {
                width: 16/@remScale;
                height: 16/@remScale;
            }
        }
    }

    .image-zoom-wrapper {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        z-index: 1;
        .ant-spin-spinning {
            position: absolute;
            width: 40/@remScale;
            top: 45%;
            left: 50%;
            transform: translateX(-50%);
            .ant-spin-dot i {
                background-color: @white;
            }
        }
    }
    .tool-bar {
        position: absolute;
        left: 50%;
        bottom: 45/@remScale;
        transform: translate(-50%, 0);
        display: flex;
        padding: 0 10/@remScale;
        justify-content: space-between;
        align-items: center;
        width: 420/@remScale;
        height: 30/@remScale;
        background: #000;
        color: @white;
        z-index: 2;
        .image-zoom-slider {
            flex: 1;
            margin: 0 14/@remScale;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            .image-zoom-range {
                width: 100%;
                cursor: pointer;
            }
            .range-gone-wrapper {
                position: absolute;
                height: 4/@remScale;
                left: 0;
                border-radius: 10/@remScale;
                background: #808080;
                right: 0;
                z-index: 0;
                margin: 0 2/@remScale;
                .range-gone {
                    position: absolute;
                    height: 4/@remScale;
                    left: 0;
                    border-radius: 10/@remScale;
                    background: @white;
                }
            }
        }
        .image-zoom-less, .image-zoom-plus {
            display: flex;
            align-items: center;
            height: 100%;
            cursor: pointer;
            .orin-sw-reicon-root {
                width: 10/@remScale;
                height: 10/@remScale;
                color: @border-color;
            }
        }
        @media (max-width: @max1) {
            display: none;
        }
    }
}

input[type=range] {
    -webkit-appearance: none;
    border-radius: 10/@remScale; /*这个属性设置使填充进度条时的图形为圆角*/
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
}

input[type=range]::-webkit-slider-runnable-track {
    height: 4/@remScale;
    background: rgba(0, 0, 0, 0);
    border-radius: 10/@remScale; /*将轨道设为圆角的*/
    z-index: 1;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 15/@remScale;
    width: 15/@remScale;
    margin-top: -5/@remScale; /*使滑块超出轨道部分的偏移量相等*/
    background: @white;
    border-radius: 50%; /*外观设置为圆形*/
}